/**
 * 定义: 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
 * React路由介绍（基于ReactRouter v6）
 */

import React,{Component} from "react";
import { HashRouter,Routes ,Route } from "react-router-dom";
/**
 * 引入组件 组件名称大驼峰法
 */
import Films from "./views/films/Films";
import Interests from './views/interest/Interests'

class App extends Component{

  render() {
    return (
      <div>
        <div>
          <a  href="#/films">电影</a>
          <br/>
          <a  href="#/interests">兴趣</a>
        </div>
        <div>
          {/**
           * 路由的代码需要写在HashRouter 或者 BrowserRouter 组件内
           * 跳转链接Route需要 包含在 Routes组件内
           * 路由模糊匹配从上到下匹配到那个就跳转如果匹配不到不加载 
           */}
        <HashRouter>
          <Routes>
                  <Route path={"/films"} element={<Films/>} />
                  <Route path="/interests" element={<Interests/>} />
                  <Route path="/" element={<Films/>}/>
          </Routes> 
        </HashRouter>


        {/*
         ReactRouter 5写法,包含在 
         <HashRouter>
          <Switch>
            <Route path="/films" component={Films}></Route>
            <Route path='/cinemas' component={Cinemas}></Route>
            <Route path='/center' component={Center}></Route>
            默认模糊匹配，重定向到/films,要用Switch包裹，不然会有问题 
            <Redirect from='/' to="/films" exact />
            上面路由都找不到，就会匹配NotFound，前提是上面重定向要精确匹配 即加上exact属性
            <Route component={NotFound}></Route>
          </Switch>
        </HashRouter> */}

        </div>
      </div>
    );
  }


}

export default App;
